<template>
	<view class="wrap">
		<view class="name">选择规格</view>
		<view class="class">
			<view class="title">服务项目(多选)</view>
			<view class="list">
				<view class="item" @click="changeFee(el, '1')" :class="formName.itemId.includes(el.id) ? 'actives' : ''" v-for="el in serviceList" :key="el.id">{{ el.name }}</view>
			</view>
		</view>
		<view class="class">
			<view class="title">服务等级</view>
			<view class="list">
				<view class="item" @click="changeFee(el, '2')" :class="el.id === formName.lvId ? 'actives' : ''" v-for="el in levelList" :key="el.id">{{ el.name }}</view>
			</view>
		</view>
		<view class="price">
			<view class="title">预估费用</view>
			<view class="number">
				￥
				<span>{{ form.total }}</span>
			</view>
		</view>
		<div class="submit">
			<u-button shape="circle" type="success" color="#21B579" @click="submit">提交订单</u-button>
		</div>
		
	</view>
</template>

<script>
export default {
	props: {
		total: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			serviceList: [],
			levelList: [],
			userId:'',
			proId:'',
			form: {
				itemFees: [],
				lvFee: '',
				total: ''
			},
			formName: {
				itemId: [],
				lvId: '',
				itemName: '',
				lvName: ''
			}
		};
	},
	// onLoad() {
	// 	console.log('111')
	// 	console.log(this.serviceParams);
	// 	console.log(this.specsList)
	// 	// if (!this.levelList.length) {
			
	// 	// 	this.getServiceItems();
	// 	// }
	// 	this.getServiceItems();
	// },
	methods: {
		// 获取服务列表
		getServiceItems({specsList,serviceParams,userId,proId}) {
			this.userId = userId
			this.proId = proId
			console.log('111')
			console.log(specsList,serviceParams,userId)
			// this.$api.get('/fit/getServiceItems').then((res) => {
			// 	if (res.retCode === '0000') {
					
			// 		// this.$emit('submitSpecs',{...this.form,...this.formName})
			// 		// this.form.itemFees=[res.data.items[0].id]
			// 		// this.form.lvFee=res.data.lvs[0].id
			// 	}
			// });
			this.serviceList = specsList.items;
			this.levelList = specsList.lvs;
			// this.formName = {
			// 	itemId: [this.specsList.items[0].id],
			// 	lvId: this.specsList.lvs[0].id,
			// 	itemName: [this.specsList.items[0].name],
			// 	lvName: this.specsList.lvs[0].name
			// };
			// this.form = {
			// 	itemFees: [this.specsList.items[0].fee],
			// 	lvFee: this.specsList.lvs[0].fee,
			// 	total: this.specsList.items[0].fee + this.specsList.lvs[0].fee
			// };
			this.formName = {
				itemId: serviceParams.itemId,
				lvId: serviceParams.lvId,
				itemName: serviceParams.itemName,
				lvName: serviceParams.lvName
			};
			this.form = {
				itemFees: serviceParams.itemFees,
				lvFee: serviceParams.lvFee,
				// total: total,
				total: serviceParams.total,
			};
			this.submitPreOrder()
		},
		// 提交订单
		submit() {
			this.$emit('submitSpecs', { ...this.form, ...this.formName });
		},
		// 修改服务 修改等级
		changeFee(e, type) {
			console.log(e, type, type === '2');
			if (type === '2') {
				this.formName.lvId = e.id;
				this.formName.lvName = e.name;
				this.form.lvFee = e.fee;
			} else {
				// console.log(this.form.itemFees);
				// let data = this.form.itemFees.split(',');
				// console.log(data);

				let index = this.formName.itemId.findIndex((el) => el === e.id);
				console.log(this.formName.itemId.length)
				if (index > -1 &&this.formName.itemId.length>1) {
					this.formName.itemId.splice(index, 1);
					this.formName.itemName.splice(index, 1);
					this.form.itemFees.splice(index, 1);
				} else {
					
					this.formName.itemId = Array.from(new Set([e.id, ...this.formName.itemId]));
					this.formName.itemName = Array.from(new Set([e.name, ...this.formName.itemName]));
					this.form.itemFees = Array.from(new Set([e.fee, ...this.form.itemFees]));
				}

				// let data = this.levelList.map(el=>)
				// console.log(this.form)

				// console.log(index)
			}
			let itemPrice = this.form.itemFees.reduce((pre, cur) => {
				return pre + cur;
			});
			console.log(itemPrice);
			this.form.total = itemPrice + this.form.lvFee;
			this.$emit('changeSpecs', { ...this.form, ...this.formName });
			this.submitPreOrder()
		},
		// 预提交订单 计算总金额 计算总金额
		submitPreOrder() {
			let data = {
				userId:this.userId,
				proId: this.proId,
				itemFees: this.form.itemFees.join(','),
				itemNames: this.formName.itemName.join(','),
				lvFee: this.form.lvFee,
				lvName: this.formName.lvName
				// total:params.total,
				// addrId:''
			};
		
			this.$api.post('/fit/submitPreOrder', data).then((res) => {
				this.submitInfo = res.data
				console.log(res);
				this.form.total = res.data.total_fee
				// if (type === '2') {
				// 	this.showService = false;
					
				// 	let data = JSON.stringify(res.data);
				// 	// this.serviceParams.total = res.data.total_fee
				// 	uni.redirectTo({
				// 		url: `/pages/orderConfirm/orderConfirm?data=${data}`
				// 	});
				// }
			});
		},
		// // 修改等级
		// changelvFee(e){

		// }
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 20rpx 32rpx;
	.name {
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		padding: 32rpx 0;
		font-weight: 500;
	}
	.class {
		// padding: 20rpx 32rpx;
		margin-top: 30rpx;
		.title {
			font-weight: 500;
			color: #333333;
			height: 44rpx;
			margin-bottom: 24rpx;
			font-size: 28rpx;
		}
		.list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			// gap:24rpx;

			.item {
				color: #333333;
				line-height: 60rpx;
				font-size: 26rpx;
				height: 60rpx;
				padding: 0 30rpx;
				font-size: 26rpx;
				background-color: #f8f9fa;
				border-radius: 30rpx;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
			}
			.active {
				background-color: #21b579;
			}
			.actives {
				background-color: #21b579;
				color: #fff;
			}
		}
	}
	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 82rpx;
		.title {
			font-weight: 500;
			color: #333333;
			height: 44rpx;
			margin-bottom: 24rpx;
			font-size: 28rpx;
		}
		.number {
			font-size: 22rpx;
			color: #f55726;
			span {
				font-size: 42rpx;
				font-weight: bold;
			}
		}
	}
	.submit {
		margin: 62rpx 0;
	}
}
</style>
